<template>
	<view class="container">
		<view class="v-header">
			<view class="v-header-left" style="width: 38%">
				<view class="v-header-left">
					<image src="../../static/member.png" mode="aspectFit"></image>
				</view>
				<view class="v-header-right">
					<view class="v-header-member-count">{{ datas.StatisticInfo.MemberCount }} 人</view>
					<view class="v-header-title">直推人员</view>
				</view>
			</view>
			<view class="v-header-left" style="margin-left: 50rpx">
				<view class="v-header-left">
					<image src="../../static/deal.png" mode="aspectFit"></image>
				</view>
				<view class="v-header-right">
					<view class="v-header-title">
						今日交易
						<text
							style="font-size: 32rpx; font-weight: bold">{{ datas.StatisticInfo.TodayDealCount }}</text>
						人
					</view>
					<view class="v-header-title">
						昨日交易
						<text
							style="font-size: 32rpx; font-weight: bold">{{ datas.StatisticInfo.LastDayDealCount }}</text>
						人
					</view>
				</view>
			</view>
		</view>

		<view class="v-conent">
			<view class="v-item" v-for="(item, index) in datas.MemberStatisticInfos">
				<view class="v-top">
					<!-- <image :src="item.UserInfo.ICon" mode="aspectFit"></image> -->
					<view class="v-item-nickname">{{ item.UserInfo.NickName }}
						<view class="v-item-nickname-sec">（{{ item.UserInfo.Account }}）</view>

					</view>
					<view class="v-item-createtime">{{ item.UserInfo.CreateTime }}</view>
				</view>
				<view class="v-contents">
					<view class="v-item-title">今日成本：{{ item.LJZC_CB_JR_OF_ORDER||0.0 }}</view>
					<view class="v-item-title-Sec" v-for="(order,index) in item.JR_ORDER_LIST">
						{{index+1}}、{{order.Price}} 元
					</view>
					<view class="v-item-op">
						<view class="v-item-op-detail" @click="viewTeamDetail(item)">业绩明细</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
	export default {
		data() {
			return {
				messageText: '',
				msgType: 'success',
				duration: 2000,

				datas: {
					CurUserId: '',
					StatisticInfo: {
						MemberCount: 0,
						TodayDealCount: 0,
						LastDayDealCount: 0
					},
					MemberStatisticInfos: [
						// {
						// 	Id: '00000-0000-00-000',
						// 	Account: '18653262913',
						// 	NickName: '哈哈',
						// 	ICon: '../../static/bj.png',
						// 	CreateTime: '2024-02-23 15:32',
						// 	LJSY_JR: 2356.23,
						// 	LJZC_JR: 2356.34,
						// 	HS: 2356.89,
						// 	LJSY_BZ: 23564.36
						// }
					]
				}
			};
		},
		methods: {
			viewTeamDetail: function(item) {
				uni.navigateTo({
					url: `/pages/sys/team-performance-detail?UserId=${item.UserInfo.Id}`
				});
			},
			loadInfo: function() {
				let _this = this;

				//正式代码
				var authToken = authTokenUtil();
				var queryData = {
					UserId: _this.datas.UserId
				};
				uni.request({
					url: _this.sysInfo.BasePath + 'Sys/GetTeamStatisticInfo',
					method: 'POST',
					data: queryData,
					header: {
						'content-type': 'application/json',
						Authorization: `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res);
							_this.datas.MemberStatisticInfos = res.data.Data.Members;
							_this.datas.StatisticInfo.MemberCount = res.data.Data.ZTRYCount;
							_this.datas.StatisticInfo.TodayDealCount = res.data.Data.JRJYCount;
							_this.datas.StatisticInfo.LastDayDealCount = res.data.Data.ZRJYCount;
						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '加载团队业绩信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载团队业绩信息失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});
			},
			init: function() {
				let _this = this;
				console.log('init');
				_this.loadInfo();
			}
		},
		onShow() {
			let _this = this;
			// _this.init();
		},
		onLoad(options) {
			let _this = this;
			_this.datas.UserId = options.UserId;

			_this.init();
			// options 包含了查询参数
			console.log(_this.datas.UserId);
		},
		created() {
			let _this = this;
			validLoginToken(null, () => {
				uni.reLaunch({
					url: "/pages/account/login"
				})
			})
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}

	.v-header {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		background-color: #c93a00ff;
		height: 200rpx !important;
		color: #fff;
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100%;
		z-index: 10001;
	}

	.v-header-left {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.v-header-right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		margin-left: 30rpx;
	}

	.v-header-left image {
		height: 100rpx;
		width: 100rpx;
	}

	.v-header-member-count {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.v-conent {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		margin-top: 220rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.v-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0rpx 5rpx 10rpx #999;
	}

	.v-top {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		height: 50rpx;
	}

	.v-top image {
		height: 40rpx;
		width: 40rpx;
		margin-right: 20rpx;
	}

	.v-item-nickname {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	.v-item-nickname-sec {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 1;
		font-weight: bold;
		font-size: 26rpx;
	}

	.v-item-createtime {
		font-size: 26rpx;
	}

	.v-contents {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		margin-top: 20rpx;
	}

	.v-item-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		font-size: 26rpx;
		height: 80rpx;
		font-weight: bold;
	}

	.v-item-title-Sec {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		font-size: 28rpx;
		height: 50rpx;
		color: #333;
	}

	.v-item-op {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.v-item-op-detail {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #c93a00ff;
		border-radius: 50rpx;
		height: 62rpx;
		width: 180rpx;
		font-size: 26rpx;
		color: #fff;
	}
</style>